<template>
    <div>
        <!-- 金额 -->
        <div>
            <div>
                总实际到账金额
               <p>5800</p>
                
            </div>
            <div>
                总提现金额
               <p>0</p>
                
            </div>
        </div>
        <!-- 姓名日期 -->
        <div>
            <span>姓名：</span>
            <el-input v-model="input" placeholder="姓名查询"></el-input>
            <span class="demonstration">申请日期：</span>
            <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
            </el-date-picker>
        </div>
        <!-- 记录数据 -->
        <div id="test2">
            <div id="test">
               全部
               <p>（0）</p>
                
            </div>
            <div id="test">
                提现申请
                <p>（0）</p>
            </div>
            <div id="test">
                提现中
                <p>（0）</p>
            </div>
            <div id="test">
                提现成功
                <p>（0）</p>
            </div>
            <div id="test">
                提现失败
                <p>（0）</p>
            </div>
        </div>
        <div>
            <el-button type="primary">导出数据到Excel</el-button>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh-right">重置</el-button>
        </div>
        <!-- 表格数据 -->
        <div>
           <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                fixed
                prop="ID"
                label="ID"
                width="150">
                </el-table-column>
                <el-table-column
                fixed
                prop="name2"
                label="姓名"
                width="150">
                </el-table-column>
                <el-table-column
                fixed
                prop="number8"
                label="身份证"
                width="150">
                </el-table-column>
                <el-table-column
                fixed
                prop="number9"
                label="手机号"
                width="150">
                </el-table-column>
                <el-table-column
                fixed
                prop="number10"
                label="提现金额"
                width="150">
                </el-table-column>
                <el-table-column
                prop="number11"
                label="实际到账"
                width="120">
                </el-table-column>
                <el-table-column
                prop="number12"
                label="银行卡"
                width="120">
                </el-table-column>
                <el-table-column
                prop="date2"
                label="申请提现时间"
                width="120">
                </el-table-column>
                <el-table-column
                prop="status"
                label="状态"
                width="300">
                </el-table-column>
                <el-table-column
                prop="reason"
                label="失败原因"
                width="120">
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" circle></el-button>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
            </el-pagination>
        </div>
    </div>
</template>
<style scoped>
#test{

    width: 200px;
    height: 100px;
    background-color: rgb(255, 255, 255);
    margin: 20px;
}
#test2{
    width: 100%;
    height: 100px;
    display:flex;
    justify-content: space-around;
}
#test:hover{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0);
    transition:box-shadow .5s;
}
</style>